<template>
  <view class="order-detail">
    <!-- 订单状态 -->
    <view class="order-status">
      <image class="status-icon" :src="statusIcon" mode="aspectFit"></image>
      <view class="status-info">
        <text class="status-text">{{statusText}}</text>
        <text class="status-desc">{{statusDesc}}</text>
      </view>
    </view>
    
    <!-- 物流信息 -->
    <view class="delivery-section" v-if="orderInfo.status > 1">
      <view class="section-title">物流信息</view>
      <view class="delivery-info">
        <view class="delivery-company">
          <text>物流公司: </text>
          <text>{{orderInfo.deliveryCompany}}</text>
        </view>
        <view class="delivery-number">
          <text>物流单号: </text>
          <text>{{orderInfo.deliveryNumber}}</text>
        </view>
        <view class="delivery-btn" @click="checkDelivery">
          查看物流
        </view>
      </view>
    </view>
    
    <!-- 收货地址 -->
    <view class="address-section">
      <view class="section-title">收货信息</view>
      <view class="address-info">
        <view class="name-phone">
          <text class="name">{{orderInfo.address.name}}</text>
          <text class="phone">{{orderInfo.address.phone}}</text>
        </view>
        <view class="detail">
          {{orderInfo.address.province}}{{orderInfo.address.city}}{{orderInfo.address.district}}{{orderInfo.address.detail}}
        </view>
      </view>
    </view>
    
    <!-- 商品列表 -->
    <view class="goods-section">
      <view class="section-title">商品信息</view>
      <view class="goods-item" v-for="(item, index) in orderInfo.goodsList" :key="index">
        <image class="goods-image" :src="item.image" mode="aspectFit"></image>
        <view class="goods-info">
          <view class="goods-name">{{item.name}}</view>
          <view class="goods-spec">规格: {{item.spec}}</view>
          <view class="goods-bottom">
            <text class="price">¥{{item.price}}</text>
            <text class="num">x{{item.num}}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-section">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text>订单编号</text>
        <text>{{orderInfo.orderId}}</text>
      </view>
      <view class="info-item">
        <text>下单时间</text>
        <text>{{orderInfo.createTime}}</text>
      </view>
      <view class="info-item">
        <text>支付方式</text>
        <text>{{orderInfo.paymentType}}</text>
      </view>
      <view class="info-item">
        <text>支付时间</text>
        <text>{{orderInfo.payTime}}</text>
      </view>
      <view class="info-item" v-if="orderInfo.status > 3">
        <text>完成时间</text>
        <text>{{orderInfo.finishTime}}</text>
      </view>
    </view>
    
    <!-- 金额信息 -->
    <view class="amount-section">
      <view class="amount-item">
        <text>商品金额</text>
        <text>¥{{orderInfo.goodsAmount}}</text>
      </view>
      <view class="amount-item">
        <text>运费</text>
        <text>¥{{orderInfo.freight}}</text>
      </view>
      <view class="amount-item total">
        <text>实付款</text>
        <text class="price">¥{{orderInfo.actualPayment}}</text>
      </view>
    </view>
    
    <!-- 操作按钮 -->
    <view class="action-bar">
      <view class="action-btn" v-if="orderInfo.status === 1" @click="cancelOrder">
        取消订单
      </view>
      <view class="action-btn" v-if="orderInfo.status === 2" @click="remindDelivery">
        提醒发货
      </view>
      <view class="action-btn primary" v-if="orderInfo.status === 3" @click="confirmReceipt">
        确认收货
      </view>
      <view class="action-btn" v-if="orderInfo.status === 4" @click="deleteOrder">
        删除订单
      </view>
      <view class="action-btn" v-if="orderInfo.status === 4" @click="goComment">
        评价商品
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderInfo: {
        orderId: '1234567890',
        status: 1, // 1待付款 2待发货 3待收货 4已完成 5已取消
        createTime: '2023-05-20 14:30:25',
        payTime: '2023-05-20 14:35:12',
        finishTime: '',
        paymentType: '微信支付',
        goodsAmount: '99.00',
        freight: '10.00',
        actualPayment: '109.00',
        deliveryCompany: '',
        deliveryNumber: '',
        address: {
          name: '张三',
          phone: '13800138000',
          province: '广东省',
          city: '深圳市',
          district: '南山区',
          detail: '科技园路1号'
        },
        goodsList: [
          {
            id: 1,
            name: '商品名称',
            image: '/static/goods1.jpg',
            spec: '默认规格',
            price: '99.00',
            num: 1
          }
        ]
      }
    }
  },
  computed: {
    statusIcon() {
      const icons = {
        1: '/static/wait-pay.png',
        2: '/static/wait-delivery.png',
        3: '/static/wait-receipt.png',
        4: '/static/completed.png',
        5: '/static/canceled.png'
      }
      return icons[this.orderInfo.status] || '/static/wait-pay.png'
    },
    statusText() {
      const texts = {
        1: '待付款',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已取消'
      }
      return texts[this.orderInfo.status] || '未知状态'
    },
    statusDesc() {
      const descs = {
        1: '订单已创建，请尽快完成支付',
        2: '商家正在准备商品，请耐心等待',
        3: '商品已发货，正在运输途中',
        4: '订单已完成，感谢您的惠顾',
        5: '订单已取消'
      }
      return descs[this.orderInfo.status] || ''
    }
  },
  onLoad(options) {
    if (options.id) {
      // 实际项目中这里应该根据订单ID请求API获取订单详情
      // 这里使用模拟数据
      this.getOrderDetail(options.id)
    }
  },
  methods: {
    getOrderDetail(id) {
      // 模拟根据ID获取订单详情
      this.orderInfo.orderId = id
    },
    checkDelivery() {
      uni.navigateTo({
        url: '/pages/order/delivery?id=' + this.orderInfo.orderId
      })
    },
    cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              this.orderInfo.status = 5
              uni.showToast({
                title: '订单已取消',
                icon: 'success'
              })
            }, 1000)
          }
        }
      })
    },
    remindDelivery() {
      uni.showToast({
        title: '已提醒商家尽快发货',
        icon: 'none'
      })
    },
    confirmReceipt() {
      uni.showModal({
        title: '提示',
        content: '请确认已收到商品，确认后订单将完成',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              this.orderInfo.status = 4
              this.orderInfo.finishTime = new Date().toLocaleString()
              uni.showToast({
                title: '确认收货成功',
                icon: 'success'
              })
            }, 1000)
          }
        }
      })
    },
    deleteOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要删除此订单吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '处理中...'
            })
            // 模拟API请求
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '订单已删除',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }, 1000)
          }
        }
      })
    },
    goComment() {
      uni.navigateTo({
        url: '/pages/order/comment?id=' + this.orderInfo.orderId
      })
    }
  }
}
</script>

<style>
.order-detail {
  padding-bottom: 120rpx;
}
.order-status {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background-color: #ff2d4a;
  color: #fff;
}
.status-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}
.status-info {
  flex: 1;
}
.status-text {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.status-desc {
  font-size: 24rpx;
}
.delivery-section,
.address-section,
.goods-section,
.info-section,
.amount-section {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}
.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.delivery-info {
  padding: 20rpx 0;
}
.delivery-company,
.delivery-number {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
}
.delivery-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  border: 1rpx solid #ff2d4a;
  color: #ff2d4a;
  font-size: 24rpx;
  border-radius: 30rpx;
  margin-top: 10rpx;
}
.address-info {
  padding: 20rpx 0;
}
.name-phone {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.name {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
}
.phone {
  font-size: 28rpx;
  color: #666;
}
.detail {
  font-size: 28rpx;
  color: #666;
}
.goods-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f1f1f1;
}
.goods-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.goods-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.goods-spec {
  font-size: 24rpx;
  color: #999;
}
.goods-bottom {
  display: flex;
  justify-content: space-between;
}
.price {
  font-size: 28rpx;
  color: #ff2d4a;
}
.num {
  font-size: 24rpx;
  color: #999;
}
.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #666;
}
.info-item:last-child {
  margin-bottom: 0;
}
.amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #666;
}
.amount-item.total {
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f1f1f1;
  font-weight: bold;
}
.amount-item.total .price {
  color: #ff2d4a;
  font-size: 32rpx;
}
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
  border-top: 1rpx solid #f1f1f1;
  padding: 0 20rpx;
}
.action-btn {
  height: 70rpx;
  line-height: 70rpx;
  padding: 0 30rpx;
  border: 1rpx solid #ddd;
  border-radius: 35rpx;
  font-size: 28rpx;
  color: #666;
  margin-left: 20rpx;
}
.action-btn.primary {
  border-color: #ff2d4a;
  background-color: #ff2d4a;
  color: #fff;
}
</style>